<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.buttom-bar {
  width: 10rem;
  height: 7vh;
  display: flex;
  @include flex-space-between-center;
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(41, 40, 37, 0.8);

  .buttom-bar-input {
    width: 7.6533rem;
    height: 1.2rem;
    @include flex-center;

    input {
      width: 7.2rem;
      padding-left: .4533rem;
      height: 1.2rem;
      border: none;
      outline: none;
      font-size: .3733rem;
      background-color: transparent;
      caret-color: #face15;
      color: #face15;
    }
  }

  .buttom-bar-mention {
    width: 1.1733rem;
    height: 1.1733rem;
    @include flex-center;
    font-size: .56rem;
  }

  .buttom-bar-send {
    width: 1.1733rem;
    height: 1.1733rem;
    @include flex-center;
    font-size: .56rem;
  }
}

.message-list {
  flex: 1; // 占满剩余空间
  padding: 0.5rem;
  overflow-y: auto; // 消息过多时滚动

  // 时间分割线（居中显示）
  .time-divider {
    text-align: center;
    font-size: 0.3rem;
    color: #888;
    margin: 0.5rem 0;
  }

  // 消息项容器（Flex布局控制对齐）
  .message-item {
    display: flex;
    margin: 0.3rem 0;
    align-items: flex-end; // 消息底部对齐

    // 头像样式
    .avatar {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      margin: 0 0.3rem;
    }

    // 消息气泡基础样式
    .message-bubble {
      max-width: 70%; // 限制最大宽度，避免过宽
      padding: 0.3rem 0.4rem;
      border-radius: 0.2rem;
      font-size: 0.4rem;
      word-wrap: break-word; // 长文本换行
    }
  }

  // 自己的消息（居右）
  .self-message {
    justify-content: flex-end; // 整体右对齐

    .avatar {
      order: 2; // 头像放在气泡右边
    }

    .message-bubble {
      background-color: #face15; // 自己的气泡色（黄色）
      color: #000; // 文字深色
      border-top-right-radius: 0.05rem; // 右上角略平，更自然
    }
  }

  // 对方的消息（居左）
  .other-message {
    justify-content: flex-start; // 整体左对齐

    .avatar {
      order: 1; // 头像放在气泡左边
    }

    .message-bubble {
      background-color: #242630; // 对方的气泡色（深色）
      color: #fff;
      border-top-left-radius: 0.05rem; // 左上角略平
    }
  }
}
</style>
<template>
  <div class="chat-with">
    <PageTitleBar title="聊天详情" />
  </div>

  <div class="message-list" ref="messageListRef">
    <!-- 时间分割线（可选） -->
    <div class="time-divider" v-if="message.time">昨天 19:33</div>

    <!-- 消息项：循环渲染 -->
    <div class="message-item" v-for="msg in messageList" :key="msg.id"
      :class="{ 'self-message': msg.isSelf, 'other-message': !msg.isSelf }">
      <!-- 头像：自己的消息在右，对方的在左 -->
      <img class="avatar" :src="msg.avatar" alt="头像">

      <!-- 消息气泡 -->
      <div class="message-bubble">
        1
      </div>
    </div>
  </div>

  <div class="buttom-bar">
    <div class="buttom-bar-input">
      <input type="text" placeholder="发送消息..." />
    </div>
    <!-- 艾特按钮 -->
    <div class="buttom-bar-mention">
      <i class="iconfont icon-aite"></i>
    </div>
    <!-- 发送按钮 -->
    <div class="buttom-bar-send">
      <i class="iconfont icon-dui"></i>
    </div>
  </div>
  <!-- 聊天内容区域 -->
</template>
<script setup>
import PageTitleBar from '../../components/common/PageTitleBar.vue'
import { useRoute } from 'vue-router';

</script>